class Carousel{
    constructor(tag){
        // 获取目标元素
        this.tag=document.querySelector(tag);
        // 获取左右按钮
        this.lBtn=this.tag.querySelector(".l_btn");

        this.rBtn=this.tag.querySelector(".r_btn");

        // 获取小圆点
        // this.dotBtn=this.tag.querySelector(".dot_box");
        this.dots = this.tag.querySelectorAll(".dot_box>span");


        // 获取图片列表
        this.list=this.tag.querySelectorAll(".img_box>ul>li");

        // 初始化变量
        this.index=1;

        // 获取上一个初始化变量
        this.lastIndex=1;

        // 获取所有li要移动的类名
        this.listClassName=["list01","list02","list03","list04"];

        // 触发绑定事件
        this.eventFn();

        // this.restListFn();

        // 轮播图
        this.timer;
        this.timeFn();

        this.rBtnFn();
        this.timerFn();

    } 
       // li全部重新设置类名
        restListFn(){
            this.list.forEach((item,idx)=>{
                // console.log(item);
                item.className=this.listClassName[idx];
            });
        };

        // 小圆点颜色
        dotColorFn(){
            this.dots[this.lastIndex-1].classList.remove("dot_active");
            this.dots[this.index-1].classList.add("dot_active");
        };
        // 封装左按钮
        rBtnFn(){
            if(this.index>3){
                this.index=0;
            }
            // console.log(this.index); 
            
            this.index++;


            this.listClassName.push(this.listClassName[0]);
            // 删除数字的第一个值
            this.listClassName.shift();
            this.restListFn();

            this.dotColorFn();

            this.lastIndex=this.index;
            
            
        };
    // 点击右按钮

    eventFn(){
        this.rBtn.addEventListener("click",()=>{
            if(this.index>3){
                this.index=0;
            }
            this.index++;
            // 操作数组
            this.listClassName.unshift(this.listClassName[this.listClassName.length-1]);
                // 删除数字的第一个值
                this.listClassName.pop();

                this.restListFn();
            // console.log(this.listClassName);
            // console.log(this);
            
            this.dotColorFn();
            this.lastIndex=this.index;
            

            // this.index++;
            // // console.log(this);
            // if(this.index==this.listClassName.length){
            //     this.index=0;
            // };

            // this.list[this.lastIndex].listList.remove(this.listClassName[this.index,this,lastIndex]);
        });
        this.lBtn.addEventListener("click",()=>{
            this.index--;
            if(this.index<1){
                this.index=4;
            }
            // console.log(this.lastIndex);
            
            

            // 操作数组
            this.listClassName.push(this.listClassName[0]);
                // 删除数字的第一个值
                this.listClassName.shift();
                this.restListFn();

                this.dotColorFn();

                this.dotColorFn();
                
            this.lastIndex=this.index;

            // this.index++;
            // // console.log(this);
            // if(this.index==this.listClassName.length){
            //     this.index=0;
            // };

            // this.list[this.lastIndex].listList.remove(this.listClassName[this.index,this,lastIndex]);
        });
        // this.dotBtn.addEventListener("click",()=>{
        //     // console.log(this);
        //     console.log(this.listClassName.push(this.listClassName[0]));
            
            
        // })

        // 小圆点
        this.dots.forEach(item=>{
            // console.log(item);
            item.addEventListener("click",()=>{
                
                let getIndex=item.getAttribute("data-index")
                this.index=getIndex;
                console.log(this.index);

                this.listClassName.push(this.listClassName[0]);
                // 删除数字的第一个值
                this.listClassName.shift();
                this.restListFn();

                this.dotColorFn();
                // console.log(this.dots[this.index]);
                this.lastIndex=this.index;
            })
            
        })

    };
    // 轮播图
        timeFn(){
            if(this.timer){
                clearInterval(this.timer)
            }
            this.timer=setInterval(()=>{
                this.rBtnFn();
            },2000)
        }
        // 定时器
        timerFn(){
            // console.log();
            let _this=this;
            this.tag.addEventListener("mouseenter",()=>{
                clearInterval(this.timer);
            });
            this.tag.addEventListener("mouseleave",()=>{
                setTimeout(this.timeFn(),2000)
            })
            // 检测页面是否切换，切换就停止定时器
        window.addEventListener("visibilitychange", () => {
            if (document.hidden) {
                clearInterval(_this.timer);
            } else {
                _this.timeFn();
            }
        });
            
        }
}